<template>
	<view>
		<view class="huahua_con">
			<image class="lookpic" mode="widthFix" :src="okimg"></image>
			<!-- <img :src="okimg" alt=""> -->
		</view>
		<canvas style="width: 800px; height: 1280px;" type="2d" canvas-id="firstCanvas" id="firstCanvas"></canvas>


		<view class="food_btn">
			<view class="food_btn_con">
				<text class="btn btn_two">请长按图片保存到手机</text>
			</view>
		</view>

		<!-- <view class="vote_doing_btn_con" v-if="type==0">
			<view class="vote_doing_btn">
				<view class="btn_one">
					<text class="bg_hui_btn">请长按图片保存到手机</text>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				okimg: "",
				deta: [],
				info: [],  //当前状态
				userinfo: [],
				type: 0,
				id: 0,
			}
		},
		onLoad(e) {
			this.id = e.id;
		},
		onReady(e) {
			let that = this;

			that.GetUserMass(e.id);

			// that.GetDeta(option.id);

		},
		methods: {
			GetUserMass: function(id) {
				let that = this;
				uni.showLoading({
					title: '正在生成图片10%',
					mask: true
				});
				that.common.http('GET', 'user', '', function(res) {
					uni.hideLoading();
					console.log(res.data)
					that.userinfo = res.data;
					that.GetData(id);
				});
			},
			GetData: function(id) {
				let that = this;
				uni.showLoading({
					title: '正在生成图片30%',
					mask: true
				});
				that.common.http('GET', 'user/pay/' + that.id, '', function(res) {
					uni.hideLoading();
					console.log(res.data)
					that.deta = res.data;

					that.info = res.data.history.find(function(element) {
						return element.status == 'current';
					});
					console.log(that.info)

					that.Down();
				});
			},




			numberToRenminbiUppercase: function(num) {
				const fraction = ['角', '分'];
				const digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
				const unit = [
					['', '万', '亿'],
					['', '拾', '佰', '仟']
				];

				if (num === 0) {
					return ''; // 或者返回 "零" 如果您想表示0  
				}

				num = Math.abs(num);
				let s = '';

				fraction.forEach((item, index) => {
					s = (digit[Math.floor(num * 10 * Math.pow(10, index)) % 10] + item).replace(/^零/, '') + s;
				});

				// 如果s为空，说明没有角和分，则s保持为空字符串  
				if (!s) s = '';

				num = Math.floor(num);

				let temp = '';
				let p = '';

				for (let i = 0; i < unit[0].length && num > 0; i++) {
					p = '';

					for (let j = 0; j < unit[1].length && num > 0; j++) {
						p = digit[num % 10] + unit[1][j] + p;
						num = Math.floor(num / 10);
					}

					temp = p.replace(/(零.)*零$/, '').replace(/^$/, '') + unit[0][i] + temp;
				}

				// 移除开头的“零”和“零万”、“零亿”等  
				temp = temp.replace(/^零+([万亿])/g, function(match, capture) {
					return capture;
				}).replace(/(零.)*零$/, '');
				return temp;
			},



			//画画
			Down: function() {
				var that = this;
				var ctx = uni.createCanvasContext('firstCanvas', this);
				uni.showLoading({
					title: '正在生成图片40%'
				});
				//绘制白色背景
				ctx.fillStyle = "#ffffff";
				ctx.fillRect(0, 0, 800, 1280);

				ctx.fillStyle = "#000";
				ctx.font = 'bold 32px SimSun';
				ctx.fillText('《项目合作协议》', 270, 74);
				ctx.font = '19px SimSun';
				ctx.fillText('编号：' + that.deta.payno, 252, 110);
				ctx.font = '22px SimSun';
				ctx.fillText('甲方：上海兆雄投资管理有限公司', 44, 160);
				ctx.fillText('乙方：' + that.userinfo.nickname, 44, 195);
				// ctx.fillText('商户名称：上海兆雄投资管理有限公司', 44, 195);
				// ctx.fillText('乙方：张三三', 500, 160);
				// ctx.fillText('账户：1234567812345678', 500, 195);
				ctx.fillText('甲乙双方本着平等互利、共同发展的原则，根据相关法律、法则的规', 86, 250);
				ctx.fillText('定，经双方友好协商，就项目合作一事达成如下协议，并共同遵照执行：', 44, 282);
				ctx.fillText('一、项目名称：柏杨联盟股东卡协议；本合同自', 86, 340);
				ctx.fillText(that.info.start_at.split('-')[0], 560, 340);
				ctx.fillRect(550, 342, 65, 1);
				ctx.fillText('年', 617, 340);
				ctx.fillText(that.info.start_at.split('-')[1], 650, 340);
				ctx.fillRect(642, 342, 35, 1);
				ctx.fillText('月', 680, 340);
				ctx.fillText(that.info.start_at.split('-')[2], 710, 340);
				ctx.fillRect(703, 342, 35, 1);
				ctx.fillText('日至', 44, 372);
				ctx.fillText(that.info.end_at.split('-')[0], 103, 372);
				ctx.fillRect(93, 374, 65, 1);
				ctx.fillText('年', 161, 372);
				ctx.fillText(that.info.end_at.split('-')[1], 194, 372);
				ctx.fillRect(186, 374, 35, 1);
				ctx.fillText('月', 224, 372);
				ctx.fillText(that.info.end_at.split('-')[2], 254, 372);
				ctx.fillRect(247, 374, 35, 1);
				ctx.fillText('日有效。', 284, 372);

				ctx.fillText('二、乙方出资情况及收益回报、支付：', 86, 430);
				ctx.fillText('1、乙方以现金方式充值人民币', 44, 462);
				ctx.fillText(Math.floor(that.deta.pay_fee), 350, 462);
				ctx.fillRect(345, 464, 77, 1);
				ctx.fillText('元（大写', 425, 462);
				ctx.fillText(that.numberToRenminbiUppercase(that.deta.pay_fee), 525, 462);
				ctx.fillRect(515, 464, 83, 1);
				ctx.fillText('元）；', 600, 462);
				ctx.fillText('2、乙方的积分账户获得', 44, 494);
				ctx.fillText(Math.floor(that.deta.pay_fee), 284, 494);
				ctx.fillRect(280, 496, 77, 1);
				ctx.fillText('积分，积分有效期为一年（到期清零），', 360, 494);
				ctx.fillText('每一个积分抵扣人民币一元；', 44, 526);

				ctx.fillText('3、乙方享有的', 44, 558);
				console.log(that.deta,9999999)
				ctx.fillText(that.info.balance/that.deta.pay_fee * 100 + '%', 200, 558);
				ctx.fillRect(190, 560, 42, 1);

				ctx.fillText('年收益，合同到期后收益可提现至乙方指定账号；', 235, 558);

				ctx.fillText('三、乙方在协议生效12个月后，充值款可赎回,并提现至指定账户，', 86, 616);
				ctx.fillText('如到期不赎回，则合同自动续签一年，续签获得的新积分新收益参照合同', 44, 648);
				ctx.fillText('第二条内容。', 44, 680);

				ctx.fillText('四、违约责任：', 86, 738);
				ctx.fillText('任何一方违反本协议约定，给另一方造成的损失，违约方应赔偿由此给守', 44, 770);
				ctx.fillText('约方造成的全部损失。', 44, 802);

				ctx.fillText('五、争议解决：', 86, 860);
				ctx.fillText('本协议履行过程中发生的争议，甲乙双方应友好协商解决，协商不成的，', 44, 892);
				ctx.fillText('提交甲方所在地人民法院管辖。', 44, 924);

				ctx.fillText('六、未尽事宜，甲乙双方可另行协商签订补充协议，补充协议与本协', 86, 982);
				ctx.fillText('议具有同等法律效力，本协议一式二份，经双方签字盖章之日起生效。', 44, 1014);
				ctx.fillText('甲方（盖章）：', 44, 1060);
				ctx.fillText('地址：上海市漕宝路82号光大 ', 44, 1092);
				ctx.fillText('会展中心E座29楼', 110, 1124);
				ctx.fillText('电话：4000970395', 44, 1156);
				ctx.fillText('021-54019976', 110, 1188);


				ctx.fillText('乙方（盖章）：' + that.userinfo.nickname, 420, 1060);
				ctx.fillText('身份证号码：' + that.userinfo.idcard, 420, 1092);
				ctx.fillText('电话：' + that.userinfo.phone, 420, 1124);
				ctx.fillText('签约日期：' + that.info.start_at, 420, 1156);

				var _src = "../../static/images/i12.png";

				ctx.drawImage(_src, 110, 1010, 150, 150);




				ctx.draw(false, function(res) {
					console.log(res);
					uni.showLoading({
						title: '正在生成图片80%'
					});
					that.canvasToImage();
				});
			},

			SavePic: function() {
				var that = this;
				uni.downloadFile({
					url: that.okimg, //仅为示例，并非真实的资源
					success: (res) => {
						console.log(res)
						if (res.statusCode === 200) {
							console.log('下载成功');
						}
					}
				});
			},

			canvasToImage() {
				var that = this;
				uni.showLoading({
					title: '正在生成图片90%'
				});
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: 800,
					height: 1280,
					destWidth: 800,
					destHeight: 1280,
					canvasId: 'firstCanvas',
					fileType: "jpg",
					success: function(res) {
						that.okimg = res.tempFilePath;
						// console.log(res.tempFilePath);
						uni.hideLoading();
					}
				})
			},
		}
	}
</script>

<style scoped>
	.huahua_con image {
		width: 100%;
	}

	#firstCanvas {
		position: fixed;
		top: 5000px;
		left: 0;
	}
</style>